<template>
	<view class="main">
		<view class="title">
			{{$t('mine.knowledge')}}
		</view>
		<view class="list">
			<view class="item">
				<view class="titles">
					热门搜索
				</view>
				<view class="lists">
					<view class="items" @click="choose(index,item,item.name == activeList.filter(ele=>ele==item.name))"
						:class="{'active':item.name == activeList.filter(ele=>ele==item.name)}"
						v-for="(item,index) in list">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
		<view class="btn">
			<button type="default" @click="submit">{{$t('login.confirm')}} <text
					v-if="activeList.length>0">（已选{{activeList.length}}个）</text></button>
		</view>
	</view>
</template>

<script>
	import {
		unique
	} from "../../utils/utils.js"
	export default {
		data() {
			return {
				list: [],
				i: undefined,
				activeList: [],
				actList: []
			};
		},
		async onLoad() {
			await this.getData()
			let list = JSON.parse(uni.getStorageSync('activeList'))
			if(list){
				this.activeList = list
			}
		},
		methods: {
			submit() {
				let token = JSON.parse(uni.getStorageSync('token')).token
				this.$httpRequest({
					url: 'app/api/addsurvey.php',
					method: "POST",
					data: {
						ustoken: token,
						content: this.actList
					}
				}).then(res => {
					if (res.errorcode == 200) {
						uni.setStorageSync('activeList', JSON.stringify(this.activeList))
						this.getData()
					}
				})
			},
			choose(index, item, isact) {
				console.log(item)

				if (isact) {
					let num = this.activeList.findIndex(ele => ele == item.name)
					this.activeList.splice(num, 1)
					this.actList.splice(num, 1)
				} else {
					if (this.activeList.length >= 3) {
						uni.showToast({
							title: "最多选择3个哦",
							icon: "none"
						})
						return
					}
					this.activeList.push(item.name)
					this.actList.push(item)
					this.activeList = unique(this.activeList)
					this.actList = unique(this.actList)
				}
			},
			getData() {
				this.$httpRequest({
					url: "app/api/hotdata.php",
					method: "POST",
					data: {
						service: "moodle_mobile_app"
					}
				}).then(res => {
					if (res.errorcode == 200) {
						this.list = res.interest
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		width: 90%;
		margin: 0 auto;

		.btn {
			position: fixed;
			left: 50%;
			bottom: 40rpx;
			transform: translateX(-50%);
			width: 90%;

			button {
				background-color: #4DBEC1;
				border-radius: 40rpx;
				color: #FFFFFF;
			}
		}

		.title {
			font-size: 52rpx;
			margin-top: 20rpx;
			font-family: PingFang SC-Bold, PingFang SC;
			font-weight: bold;
			color: #0F1826;
		}

		.list {
			.item {
				margin-top: 48rpx;

				.titles {
					font-size: 36rpx;
					font-family: PingFang SC-Medium, PingFang SC;
					font-weight: 500;
					color: #000000;
				}

				.lists {
					display: flex;
					justify-content: space-between;
					align-items: center;
					flex-wrap: wrap;

					.items {
						margin: 32rpx 0;
						width: 202rpx;
						height: 72rpx;
						border-radius: 82rpx;
						background: #EBEDF0;
						text-align: center;
						line-height: 72rpx;
						font-size: 28rpx;
						font-family: PingFang SC-Medium, PingFang SC;
						font-weight: 500;
						color: #0F1826;
						white-space: nowrap;
						padding: 0 10rpx;
						overflow: hidden;
						text-overflow: ellipsis;

						&.active {

							background: #4DBEC1;
							color: #FFFFFF;
						}
					}
				}
			}
		}
	}
</style>
